<style  lang="less" scoped>
/deep/ .yaokongPersonDialog{
    background: rgba(2, 22, 42, .9);
    // max-height: 60%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .el-dialog__header{
        padding: 10px 0;
        display: flex;
        align-items: center;
        .el-dialog__title{
            color:#fff;
            margin-left: 20px;
            flex:1;
            overflow: hidden;
            margin-right: 40px;
            font-size: 16px;
        }
        .el-dialog__headerbtn{
            top:15px;
            .el-dialog__close{
                color:#fff;
            }
        }
    }
    .el-dialog__body{
        padding-top: 0;
        padding-bottom: 10px;
        flex:1;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        // 操作人弹框样式
        .operatorPwd{
            & > div + div{
                margin-top: 10px;
            }
            & > div{
                display: flex;
                align-items: center;
                & > label{
                    font-size: 14px;
                    width: 120px;
                    color: #dee2e5;
                }
                .el-input,.el-select{
                    flex:1;
                    overflow: hidden;
                }
            }
        }

        // 消息告警输入框
        .messageAlarmList{
            flex:1;
            overflow: hidden;
            .el-table{
                overflow: hidden;
                display: flex;
                flex-direction: column;
                background:transparent;
                &:before{
                    height: 0;
                }
                .el-table__header-wrapper{
                    overflow: initial;
                }
                .el-table__body-wrapper{
                    flex:1;
                    overflow: auto;
                }
            }
            .el-table th{
                background:#142e48;
            }
            .el-table tr{
                background: transparent;
            }
            .el-table td, .el-table th{
                border: 1px solid #313338;
                border-left: 0;
                border-right: 0;
                color: #dee2e5;
            }
            .el-table--enable-row-hover .el-table__body tr:hover > td {
                background-color: #3a6378;
            }
        }

    }
    .el-dialog__footer{
        // border-top: 1px solid #eee;
        .el-button{
            color: #ebeff0;
            background: linear-gradient(#176575,#07283f);
            border:0;
            box-shadow: 0 -2px 0 rgba(16, 164, 195, .8);
        }
    }
}
.Page1{
  width: 100%;
  height: 100%;
  color:#fff;
  display: flex;
  flex-direction: column;
  overflow: auto;
  position: relative;
  .headerBox{
    width: 100%;
    border-bottom: 2px solid #fff;
    position: relative;
    & > h1{
      font-size: 1.8rem;
      font-family: '宋体';
      font-weight: bold;
      text-align: center;
    }
    .headerRightBtnGroup{
      display: flex;
      align-items: center;
      align-self: flex-end;
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translate(0, -50%);
    }
    .headerLeftBtnGroup{
      display: flex;
      align-items: center;
      align-self: flex-end;
      position: absolute;
      top: 50%;
      left: 1%;
      transform: translate(0, -50%);
      .block{
        margin-left: 2rem;
      }
    }
  }
  .wrapper{
    flex:1;
    overflow: auto;
    padding: 0 0px;
    box-sizing: border-box;
    .ctn{
      min-width: 99%;
      height: 99%;
      #svgDom{
        width: 100%;
        height: 100%;
      }
    }
  }
}
/deep/ .el-form-item__label {
  color: #fff; /* 自定义 label 的颜色 */
}

/* 调整 el-input 的 placeholder 颜色 */
/deep/ .el-input__inner::placeholder {
  color: #666; /* 自定义 placeholder 的颜色 */
  opacity: 1;
}

/* 调整 el-select 的 placeholder 颜色 */
/deep/ .el-select .el-input__inner::placeholder {
  color: #666; /* 自定义 placeholder 的颜色 */
}
/deep/ .el-textarea__inner::placeholder {
  color: #666; /* 自定义 placeholder 的颜色 */
  opacity: 1; /* 确保颜色生效 */
}

// 遥控弹框样式
/deep/ .yaokongDialog, /deep/ .operateRecordDialog{
  background: rgba(2, 22, 42, 1);
  max-height: 70%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .el-dialog__header{
    padding: 10px 0;
    .el-dialog__title{
      color:#fff;
      margin-left: 20px;
    }
    .el-dialog__headerbtn{
      top:15px;
      .el-dialog__close{
        color:#fff;
      }
    }
  }
  .el-dialog__body{
    padding-top: 0;
    padding-bottom: 10px;
    flex:1;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    // 操作人弹框样式
    .operatorPwd{
      & > div + div{
        margin-top: 10px;
      }
      & > div{
        display: flex;
        align-items: center;
        & > label{
          font-size: 14px;
          width: 80px;
        }
        .el-input{
          flex:1;
          overflow: hidden;
        }
      }
    }

    // 消息告警输入框
    .messageAlarmList{
      flex:1;
      overflow: auto;
      .el-table{
        overflow: hidden;
        display: flex;
        flex-direction: column;
        background:transparent;
        &:before{
          height: 0;
        }
        .el-table__header-wrapper{
          overflow: initial;
        }
        .el-table__body-wrapper{
          flex:1;
          overflow: auto;
        }
      }
      .el-table th{
        background:#142e48;
      }
      .el-table tr{
        background: transparent;
      }
      .el-table td, .el-table th{
        border: 1px solid #313338;
        border-left: 0;
        border-right: 0;
        color: #dee2e5;
      }
      .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: #3a6378;
      }
    }

  }
  .el-dialog__footer{
    // border-top: 1px solid #eee;
    .el-button{
      color: #ebeff0;
      background: linear-gradient(#176575,#07283f);
      border:0;
      box-shadow: 0 -2px 0 rgba(16, 164, 195, .8);
    }
  }
}


// 汇报调度弹框样式
/deep/ .reportSchedulingDialog{
  background: rgba(2, 22, 42, 1);
  max-height: 60%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .el-dialog__header{
    padding: 10px 0;
    .el-dialog__title{
      color:#fff;
      margin-left: 20px;
    }
    .el-dialog__headerbtn{
      top:15px;
      .el-dialog__close{
        color:#fff;
      }
    }
  }
  .el-dialog__body{
    padding-top: 0;
    padding-bottom: 0;
    flex:1;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    // 汇报调度输入框
    .reportSchedulingTextArea{
      flex:1;
      overflow: hidden;
      // .el-textarea{
      // 	height: 100%;
      // }
      .el-textarea__inner{
        height: 100%;
        color:#dee2e5;
        background:transparent;
        border: 1px solid #666;
        font-size: 16px;
      }
    }

  }
  .el-dialog__footer{
    // border-top: 1px solid #eee;
    text-align: center;
    .el-button{
      color: #ebeff0;
      background: linear-gradient(#176575,#07283f);
      border:0;
      box-shadow: 0 -2px 0 rgba(16, 164, 195, .8);
    }
  }
}
/deep/ .operateRecordDialog {
  pointer-events: auto;
  margin-right: 34%;
}
.is-highlight {
  animation: highlight 1s;
}
@keyframes highlight {
  0% {
    color: yellow;
  }
  100% {
    color: #FFFFFF;
  }
}
.brandBtn{
  animation: flash 1s infinite;
}
@keyframes flash {
  0%, 100% {
    opacity: 1; /* 完全不透明 */
  }
  50% {
    opacity: 0.5; /* 半透明 */
  }
}
.brandMsgTitle{
  font-size: 2rem;
  color: white;
}
.brandMsgP{
  font-size: 1.5rem;
  //空两个字
  margin: 2rem;
}
/deep/ .el-dialog__body{
  overflow: scroll;
}
.fault-dialog-content {
  padding: 20px;
  color: #fff;
}

/* 覆盖 Element UI 的默认样式 */
:deep(.el-tabs__item) {
  color: rgba(255, 255, 255, 0.6);
}


:deep(.el-tabs__item.is-active) {
  color: #409EFF;
}

:deep(.el-tabs__nav-wrap::after) {
  background-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-form-item__label) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.el-collapse-item__header) {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-collapse-item__content) {
  background-color: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-checkbox__label) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.el-radio__label) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.el-input-number__decrease),
:deep(.el-input-number__increase) {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

:deep(.el-input-number__decrease:hover),
:deep(.el-input-number__increase:hover) {
  color: #409EFF;
  background-color: rgba(64, 158, 255, 0.1);
}

:deep(.el-input__inner) {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
:deep(.is-disabled .el-input__inner){
  background-color: #131f2a;
  border-color: rgba(255, 255, 255, 0.2);
  color: #999;
}
:deep(.el-input__inner:hover),
:deep(.el-input__inner:focus) {
  border-color: #409EFF;
}

:deep(.el-select-dropdown__item) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.el-select-dropdown__item.hover) {
  background-color: rgba(64, 158, 255, 0.1);
}

:deep(.el-select-dropdown__item.selected) {
  color: #409EFF;
  background-color: rgba(64, 158, 255, 0.1);
}

:deep(.el-slider__runway) {
  background-color: rgba(255, 255, 255, 0.2);
}

:deep(.el-slider__bar) {
  background-color: #409EFF;
}

:deep(.el-slider__button) {
  border-color: #409EFF;
  background-color: #409EFF;
}

:deep(.el-collapse) {
  border-color: rgba(255, 255, 255, 0.1);
  background-color: transparent;
}

.distance-slider {
  width: 300px;
}

.ms-label {
  margin-left: 5px;
  color: rgba(255, 255, 255, 0.8);
}

.el-collapse {
  margin: 10px 0;
  border-color: rgba(255, 255, 255, 0.1);
}

/* 修复下拉菜单的背景色 */
:deep(.el-select-dropdown) {
  background-color: rgb(2, 22, 42);
  border-color: rgba(255, 255, 255, 0.1);
}

/* 修复弹出层的背景色 */
:deep(.el-popper[x-placement^="bottom"]) {
  background-color: rgb(2, 22, 42);
}

/* 修改折叠面板的样式 */
:deep(.el-collapse) {
  border: none;
  background-color: transparent;
}

:deep(.el-collapse-item) {
  margin-bottom: 1px;
}

:deep(.el-collapse-item__header) {
  background-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  border: none;
  padding: 0 15px;
  height: 40px;
  line-height: 40px;
}

:deep(.el-collapse-item__header:hover) {
  background-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-collapse-item__content) {
  background-color: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.8);
  border: none;
  padding: 15px;
}

:deep(.el-collapse-item__arrow) {
  color: rgba(255, 255, 255, 0.8);
}

:deep(.el-collapse-item__header.is-active) {
  border-bottom-color: transparent;
}

:deep(.el-collapse-item__wrap) {
  border: none;
  background-color: transparent;
}

/* 添加新的样式 */
.fault-list {
  margin-top: 20px;
}

:deep(.el-table) {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgb(28, 46, 64);
}

:deep(.el-table::before) {
  display: none;
}

:deep(.el-table td),
:deep(.el-table th.is-leaf) {
  border-bottom: 1px solid rgb(28, 46, 64);
}

:deep(.el-table--border th),
:deep(.el-table--border td) {
  border-right: 1px solid rgb(28, 46, 64);
}

:deep(.el-table thead) {
  border-bottom: 1px solid rgb(28, 46, 64);
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: rgba(2, 22, 42) !important;
}

.cancel-fault-buttons {
  display: flex;
  gap: 10px;
}

:deep(.el-textarea__inner) {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

:deep(.el-textarea__inner:focus) {
  border-color: #409EFF;
}

:deep(.el-table__empty-block) {
  background-color: transparent;
}

:deep(.el-table__empty-text) {
  color: rgba(255, 255, 255, 0.6);
}
.messageAlarmList {
  overflow: hidden;  /* 隐藏溢出内容 */
}
.messageAlarmList {
  scrollbar-width: none; /* 隐藏滚动条 */
}
.messageAlarmList::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

.Page1:active {
  cursor: grabbing;
}
</style>
<template xmlns="">
    <div class="Page1" @contextmenu.r.prevent  @click="cancelLeftClickMenu" @contextmenu.stop="cancelLeftClickMenu">
        <div class="headerBox">
            <div class="headerLeftBtnGroup">
                <div class="block">
                    <el-cascader
                            v-model="jiaoAnValue"
                            :options="jiaoAnOptions_1"
                            placeholder="教案"
                            style="width: 7rem;"
                            :props="{ expandTrigger: 'hover' }"
                            @change="handleChange"
                    ></el-cascader>
                </div>
                <div class="block">
                    <el-cascader
                            v-model="gongkuangValue"
                            placeholder="工况"
                            style="width: 7rem"
                            :options="gongKuangOptions"
                            :props="{ expandTrigger: 'hover' }"
                            @change="handleChange"></el-cascader>
                </div>
            </div>
            <h1 style="color: #fff;margin-left: -10%">供配电技术实训平台一次系统图</h1>
            <div class="headerRightBtnGroup">
                <el-button @click="goPage('/mainPage')">系统主电气图</el-button>
                <el-button @click="goPage('/quxian')">电流实时曲线</el-button>
                <el-button @click="goPage('/gzp')">报警光字牌</el-button>
                <el-button @click="goPage('/yb')">综保软压板</el-button>
                <el-button @click="goPage('/tuopu')">通信拓扑图</el-button>
                <el-button @click="operationRecords">操作记录</el-button>
            </div>
        </div>
        <div class="wrapper" ref="page" @mousedown="startDrag">
            <div class="ctn">
                <svg id="svgDom">
                    <g>
                        <g transform="translate(1600,40)">
                            <rect transform="translate(-20,-10)" x="0" y="0" width="210" height="70" fill="none" stroke="#fff" stroke-width="3"></rect>
                            <rect x="0" y="0" width="50" height="15" fill="rgb(0,210,0)"></rect>
                            <text x="60" y="15" fill="#fff" font-size="18px">绿色代表分位</text>
                            <text x="60" y="45" fill="#fff" font-size="18px">红色代表合位</text>
                            <rect x="0" y="30" width="50" height="15" fill="rgb(255,0,0)"></rect>
                        </g>

                        <line x1="150" y1="120" x2="400" y2="120" stroke="rgb(0,210,0)" stroke-width="5"></line>
                        <text x="150" y="100" fill="#FF5B41" font-size="30px">10kV高压配电装置</text>
                        <line x1="275" y1="120" x2="275" y2="180" stroke="rgb(0,210,0)" stroke-width="2"></line>
                        <shou-che-svg :scale="1.5" :scGap="-2" :shou-che-data-obj="{state_val:0}"  :rotate="90" :translate-x="335" :translate-y="210" :title-x="-25" :title-y="-10"></shou-che-svg>
                        <rect-svg
                            :info="{}"
                            :state="1"
                            :stateDesc="'903'"
                            :rotate="90"
                            :translate-y="208"
                            :translate-x="316"
                            :text-translate-x="6"
                            :text-translate-y="2"
                            :scale="1"
                            @itemRightClick="itemRightClick"
                            :itemObj="{is_clear:1}"
                            :name="'903'"
                        ></rect-svg>
                        <g transform="translate(80,650)">
                            <num-screen
                                :has-screen="false"
                                :Ia="0"
                                :P="0"
                                :Q="0"
                                :Uab="0"
                            ></num-screen>
                        </g>
                        <text x="300" y="180" fill="#FF5B41" font-size="25px">已储能</text>
                        <three-circle :translate-y="220" :translate-x="66"></three-circle>
                        <three-circle :translate-y="250" :translate-x="66"></three-circle>
                        <line x1="275" y1="275" x2="275" y2="600" stroke="rgb(0,210,0)" stroke-width="2"></line>
                        <polyline transform="translate(0,50)" points="150,380,150,350,420,350,420,380" style="fill: none;stroke: rgb(0,210,0);stroke-width: 2"></polyline>
                        <line   transform="translate(0,50)" x1="350" y1="350" x2="350" y2="380" stroke="rgb(0,210,0)" stroke-width="2"></line>
                        <xian-quan :rotate="90" :scale="1.5" :translate-x="268.5" :translate-y="268"></xian-quan>
                        <blq :rotate="90" :scale="1.5" :translate-x="68.5" :translate-y="268"></blq>
                        <terminal-svg
                            :info="{}"
                            :state="0"
                            :stateDesc="'903dd'"
                            :name="'903dd'"
                            @itemRightClick="itemRightClick"
                            :scale=1.5
                            :translate-x="457.5"
                            :translate-y="542"
                            :text-translate-y="-15"
                            :text-translate-x="70"
                            :rotate="180"
                        ></terminal-svg>
                        <polygon points="265,550,285,550,275,580" stroke="rgb(0,210,0)" stroke-width="2" fill="none"></polygon>
                        <polygon transform="translate(325,0)" points="265,550,285,550,275,580" stroke="rgb(0,210,0)" stroke-width="2" fill="none"></polygon>
                        <polyline points="275,600,600,600,600,400" stroke="rgb(0,210,0)" stroke-width="2" fill="none"></polyline>
                        <zhanyongbian :translate-x="-2344" :translate-y="-256" :scale="1.6" :swidth="1.25" color_1="rgb(0,210,0)" :zyb-style="2"></zhanyongbian>
                        <polyline points="600,312,600,150,800,150,800,312" stroke="#fff" stroke-width="2" fill="none"></polyline>
                        <connect-line
                            :info="{}"
                            :state="0"
                            :stateDesc="'401'"
                            :name="'401'"
                            @itemRightClick="itemRightClick"
                            :scale=1.5
                            :translate-x="837.5"
                            :translate-y="424"
                            :text-translate-y="-55"
                            :text-translate-x="70"
                            :rotate="180"
                        ></connect-line>
                        <text x="720" y="320" fill="rgb(0,210,0)" font-size="25px">就地</text>
                        <polyline points="800,380,800,600,950,600,950,120" stroke="#fff" stroke-width="2" fill="none"></polyline>
                        <three-circle :translate-y="320" :translate-x="592" color="#fff"></three-circle>
                        <g transform="translate(600,650)">
                            <num-screen
                                :has-screen="false"
                                :Ia="0"
                                :P="0"
                                :Q="0"
                                :Uab="0"
                            ></num-screen>
                        </g>
                        <line x1="920" y1="120" x2="1800" y2="120" stroke="#fff" stroke-width="5"></line>
                        <text x="1000" y="100" fill="#FF5B41" font-size="30px">0.4kV低压配电装置</text>
                        <g>
                            <line x1="1150" y1="120" x2="1150" y2="220" stroke="#fff" stroke-width="2"></line>
                            <connect-line
                                :info="{}"
                                :state="1"
                                :stateDesc="'403'"
                                :name="'403'"
                                @itemRightClick="itemRightClick"
                                :scale=1.5
                                :translate-x="1187.5"
                                :translate-y="331"
                                :text-translate-y="-45"
                                :text-translate-x="70"
                                :rotate="180"
                            ></connect-line>
                            <text x="1060" y="250" fill="rgb(0,210,0)" font-size="25px">就地</text>
                            <line x1="1150" y1="280" x2="1150" y2="580" stroke="#fff" stroke-width="2"></line>
                            <three-circle :translate-y="220" :translate-x="941" color="#fff"></three-circle>
                            <polygon transform="translate(875,-80)" points="265,550,285,550,275,580" stroke="#fff" stroke-width="2" fill="none"></polygon>
                            <polygon transform="translate(875,-60)rotate(180,275,580)" points="265,550,285,550,275,580" stroke="#fff" stroke-width="2" fill="none"></polygon>
                            <g transform="translate(950,650)">
                                <num-screen
                                  :has-screen="false"
                                    :Ia="0"
                                    :P="0"
                                    :Q="0"
                                    :Uab="0"
                                ></num-screen>
                            </g>
                            <text x="1130" y="610" fill="rgb(48, 191, 218)" font-size="20px">馈线1</text>
                        </g>
                        <g transform="translate(250,0)">
                            <line x1="1150" y1="120" x2="1150" y2="220" stroke="#fff" stroke-width="2"></line>
                            <connect-line
                                :info="{}"
                                :state="1"
                                :stateDesc="'405'"
                                :name="'405'"
                                @itemRightClick="itemRightClick"
                                :scale=1.5
                                :translate-x="1187.5"
                                :translate-y="331"
                                :text-translate-y="-45"
                                :text-translate-x="70"
                                :rotate="180"
                            ></connect-line>
                            <line x1="1150" y1="280" x2="1150" y2="580" stroke="#fff" stroke-width="2"></line>
                            <three-circle :translate-y="220" :translate-x="941" color="#fff"></three-circle>
                            <polygon transform="translate(875,-80)" points="265,550,285,550,275,580" stroke="#fff" stroke-width="2" fill="none"></polygon>
                            <polygon transform="translate(875,-60)rotate(180,275,580)" points="265,550,285,550,275,580" stroke="#fff" stroke-width="2" fill="none"></polygon>
                            <g transform="translate(950,650)">
                                <num-screen
                                    :has-screen="false"
                                    :Ia="0"
                                    :P="0"
                                    :Q="0"
                                    :Uab="0"
                                ></num-screen>
                            </g>
                            <text x="1130" y="610" fill="rgb(48, 191, 218)" font-size="20px">馈线2</text>
                        </g>
                        <g transform="translate(500,0)">
                            <line x1="1150" y1="120" x2="1150" y2="220" stroke="#fff" stroke-width="2"></line>
                            <connect-line
                                :info="{}"
                                :state="1"
                                :stateDesc="'407'"
                                :name="'407'"
                                @itemRightClick="itemRightClick"
                                :scale=1.5
                                :translate-x="1187.5"
                                :translate-y="331"
                                :text-translate-y="-45"
                                :text-translate-x="70"
                                :rotate="180"
                            ></connect-line>
                            <line x1="1150" y1="280" x2="1150" y2="580" stroke="#fff" stroke-width="2"></line>
                            <three-circle :translate-y="220" :translate-x="941" color="#fff"></three-circle>
                            <polygon transform="translate(875,-80)" points="265,550,285,550,275,580" stroke="#fff" stroke-width="2" fill="none"></polygon>
                            <polygon transform="translate(875,-60)rotate(180,275,580)" points="265,550,285,550,275,580" stroke="#fff" stroke-width="2" fill="none"></polygon>
                            <g transform="translate(950,650)">
                                <num-screen
                                    :has-screen="false"
                                    :Ia="0"
                                    :P="0"
                                    :Q="0"
                                    :Uab="0"
                                ></num-screen>
                            </g>
                            <text x="1130" y="610" fill="rgb(48, 191, 218)" font-size="20px">馈线3</text>
                        </g>
                    </g>
                </svg>
            </div>
        </div>
        <rightClickmenuList v-if="rightMenuObj&&showMenu" :rightMenuObj="rightMenuObj" @menuItemClick="menuItemClick"></rightClickmenuList>
        <el-dialog  custom-class="yaokongPersonDialog" :visible.sync="operatorPwdDialogVisible_0" width="22%" :close-on-click-modal="false">
            <p slot="title" class="el-dialog__title">操作人</p>
            <div class="operatorPwd">
                <div class="operator">
                    <label>请输入操作人</label>
                    <el-select size="small" v-model="operatorPwdObj.username" style="width: 16rem;">
                        <el-option
                            v-for="(item,index) in userInfoJson.operatorList"
                            :key="index"
                            :label="item.username"
                            :value="item.username"
                        ></el-option>
                    </el-select>
                </div>
                <div class="pwd">
                    <label>请输入密码</label>
                    <el-input v-model="operatorPwdObj.pwd" size="small" type="password"   @keydown.enter.native="operatorPwdSubmit_0"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer" >
				<el-button size="small" @click="operatorPwdSubmit_0">确 定</el-button>
				<el-button size="small" @click="operatorPwdDialogVisible_0 = false">取 消</el-button>
			</span>
        </el-dialog>
        <el-dialog  custom-class="yaokongPersonDialog" :visible.sync="operatorPwdDialogVisible" width="22%" :close-on-click-modal="false">
            <p slot="title" class="el-dialog__title">监护人</p>
            <div class="operatorPwd">
                <div class="operator">
                    <label>请输入监护人</label>
                    <el-select size="small" v-model="adminPwdObj.username" style="width: 16rem;">
                        <el-option
                            v-for="(item,index) in userInfoJson.adminList"
                            :key="index"
                            :label="item.username"
                            :value="item.username"
                        ></el-option>
                    </el-select>

                </div>
                <div class="pwd">
                    <label>请输入监护员密码</label>
                    <el-input v-model="adminPwdObj.pwd" size="small" type="password" @keydown.enter.native="operatorPwdSubmit"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer" >
				<el-button size="small" @click="operatorPwdSubmit">确 定</el-button>
				<el-button size="small" @click="operatorPwdDialogVisible = false">取 消</el-button>
			</span>
        </el-dialog>
        <el-dialog
            custom-class="switchPatrolDialog"
            :visible.sync="dialogVisible"
            :close-on-press-escape="true"
            :close-on-click-modal="true"
            :width="`40%`"
            :modal="false"
            @before-close="handleDialogClose"
        >

            <!-- 隔离刀 -->
            <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'gelidao'">

                <!-- 遥控 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
                    <p slot="title" class="el-dialog__title">遥控</p>
                    <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
                </template>

                <!-- 开关清闪 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 2">
                    <p slot="title" class="el-dialog__title">开关清闪</p>
                </template>



                <!-- 挂牌/摘牌 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 6">
                    <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
                    <guapaiDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></guapaiDialog>
                </template>

                <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value != 4" size="small" @click="dialogVisible = false">取 消</el-button>

                    <!-- 遥控 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>
                    <!-- 挂牌/摘牌 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 6" size="small" type="primary" @click="handleBrand">确 定</el-button>

				</span>
            </template>

            <!-- 地刀 -->
            <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'didao'">
                <!--          遥控-->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
                    <p slot="title" class="el-dialog__title">遥控</p>
                    <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
                </template>
                <!-- 开关清闪 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 0">
                    <p slot="title" class="el-dialog__title">开关清闪</p>
                    <span>暂无内容</span>
                </template>

                <!-- 全站清闪 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 4">
                    <p slot="title" class="el-dialog__title">全站清闪</p>
                    <span>暂无内容</span>
                    <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
                </template>
                <!-- 挂牌/摘牌 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 5">
                    <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
                    <guapaiDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></guapaiDialog>
                </template>
                <span slot="footer" class="dialog-footer" >
            <!-- 遥控 按钮 -->					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 0" size="small" @click="dialogVisible = false">取 消</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>


                    <!-- 挂牌/摘牌 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 5" size="small" type="primary" @click="handleBrand">确 定</el-button>
				</span>
            </template>

            <!-- 断路器 -->
            <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'duanluqi'">
                <!-- 遥控 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
                    <p slot="title" class="el-dialog__title">遥控</p>
                    <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
                </template>
                <!-- 开关清闪 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 2">
                    <p slot="title" class="el-dialog__title">开关清闪</p>
                    <span>确定要将{{currentSelectMenuItemObj.currentObj.name}}开关清闪吗？</span>
                    <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
                </template>
                <!-- 全站清闪 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 3">
                    <p slot="title" class="el-dialog__title">全站清闪</p>
                    <span>确定要将全部设备进行清闪吗？</span>
                    <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
                </template>

                <!-- 挂牌/摘牌 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 6">
                    <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
                    <guapaiDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></guapaiDialog>
                </template>
                <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value != 4" size="small" @click="dialogVisible = false">取 消</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 2" size="small" @click="clearFlesh">确定</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 3" size="small" @click="clearAll">确定</el-button>
                    <!-- 遥控 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>

                    <!-- 挂牌/摘牌 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 6" size="small" type="primary" @click="handleBrand">确 定</el-button>
				</span>
            </template>

            <!-- 把手 -->
            <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'bashou'">
                <!-- 操作 - 弹框 -->
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
                    <p slot="title" class="el-dialog__title">操作</p>
                    <span>暂无内容</span>
                </template>
                <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value != 2" size="small" @click="dialogVisible = false">取 消</el-button>

				</span>
            </template>



            <template v-if="currentSelectMenuItemObj&&currentSelectMenuItemObj.type=='ruanyaban'">
                <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
                    <p slot="title" class="el-dialog__title">遥控</p>
                    <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
                </template>
                <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 2" size="small" @click="dialogVisible = false">取 消</el-button>

                    <!-- 遥控 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>
				</span>
            </template>




        </el-dialog>
        <el-dialog title="教案初始化" :visible.sync="newJiaoAnDialog" width="40rem" 	custom-class="switchPatrolDialog" :close-on-press-escape="true"
                   :close-on-click-modal="true" 	@close="closeJiaoAn">
            <el-form :model="form">
                <el-form-item label="教案名称" label-width="8rem">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="工况文件" label-width="8rem">
                    <el-select v-model="form.region" placeholder="请选择工况文件">
                        <el-option  v-for="(item,index) in form.gKList" :key="index" :label=item.name :value=item.id></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="教案描述" label-width="8rem">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="form.desc">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="newJiaoAn">教案入库</el-button>
                <el-button type="primary" @click="clearNewData">取消</el-button>
            </div>
        </el-dialog>
        <load-jiao-an :loadJiaoAn="loadJiaoAn" @DialogClose="closeJiaoAn"></load-jiao-an>
        <remove-jiao-an :removeJiaoAn="removeJiaoAn" @DialogClose="closeJiaoAn"></remove-jiao-an>
        <start-handle :startHandle="startHandle" @DialogClose="closeHandle" @showAddJiaoAn="showAddJiaoAn"></start-handle>
        <sys-gong-kuang :sysGongKuang="sysGongKuang" @DialogClose="closeJiaoAn"></sys-gong-kuang>
        <el-dialog ref="operateRecordDialogRef" custom-class="operateRecordDialog" :modal="false" :close-on-click-modal="false" v-if="operationRecordsDialogVisible" :visible.sync="operationRecordsDialogVisible" v-dialogDrag:{dialogDrag}="true" width="35%">
            <p slot="title" class="el-dialog__title">操作记录</p>
            <div class="messageAlarmList">
                <el-table :data="operationRecordsData" width="100%" height="250" >
                    <el-table-column prop="num" label="序号" width="85" header-align="center" align="center" >
                        <template #default="{row}">
                            <span :class="{'is-highlight': !!row.isHighlight}">{{row.num}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="操作时间" width="160" header-align="center" align="center" >
                        <template #default="{row}">
                            <span :class="{'is-highlight': !!row.isHighlight}">{{row.createTime}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="log_desc" label="操作描述" header-align="center" >
                        <template #default="{row}">
                            <span :class="{'is-highlight': !!row.isHighlight}">{{row.log_desc}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import ScaleBox from "@/components/ScaleBox/ScaleBox.vue";
import MonitorHeader from "@/components/MonitorHeader/MonitorHeader.vue";
import SysGongKuang from "@/components/JA/sysGongKuang.vue";
import StartHandle from "@/components/JA/startHandle.vue";
import RemoveJiaoAn from "@/components/JA/removeJiaoAn.vue";
import LoadJiaoAn from "@/components/JA/loadJiaoAn.vue";
import { getOperateRecord, saveJAn, submitOperateRecord } from "@/api/api";
import { EventBus } from "@/tools/bus";
import NumScreen from "@/components/controls/numScreen.vue";
import BiLeiQi from "@/components/controls/biLeiQi.vue";
import XianQuan from "@/components/controls/xianquan.vue";
import { wsSend } from "@/tools/sendMessage";
import TerminalSvg from "@/components/controls/terminal-svg.vue";
import ConnectLine from "@/components/controls/connect-line.vue";
import RectSvg from "@/components/controls/rect-svg.vue";
import MainBus from "@/components/controls/mainBus.vue";
import DianLiuHuGanQi from "@/components/controls/dianLiuHuGanQi.vue";
import Jiedi from "@/components/controls/jiedi.vue";
import ShouCheSvg from "@/components/controls/shou-che-svg.vue";
import Zhanyongbian from "@/components/controls/zhanyongbian.vue";
import FourCircle from "@/components/controls/fourCircle.vue";
import DianKangQi from "@/components/controls/dianKangQi.vue";
import TwoCircle from "@/components/controls/twoCricle.vue";
import Dianrongqi from "@/components/controls/dianrongqi.vue";
import TwoTriangle from "@/components/controls/twoTriangle.vue";
import ShouCheSvg1 from "@/components/controls/shou-che-svg1.vue";
import ThreeCircle from "@/components/controls/threeCircle.vue";
import RightClickmenuList from "@/components/rightClickmenuList/rightClickMenuList.vue";
import YaokongDialog from "@/components/rightClickmenuList/yaokongDialog.vue";
import GuapaiDialog from "@/components/rightClickmenuList/guapaiDialog.vue";
import {pageHandler} from "@/mixins/pageHandler";
import Blq from "@/components/controls/blq.vue";


export default {
    name: "mainPage",
    components: {
        Blq,
        GuapaiDialog, YaokongDialog, RightClickmenuList,
        ThreeCircle,
        ShouCheSvg1,
        TwoTriangle,
        Dianrongqi,
        TwoCircle,
        DianKangQi,
        FourCircle,
        Zhanyongbian,
        ShouCheSvg,
        Jiedi,
        DianLiuHuGanQi,
        MainBus,
        RectSvg,
        ConnectLine,
        TerminalSvg,
        XianQuan,
        BiLeiQi,
        NumScreen,
        LoadJiaoAn,
        RemoveJiaoAn,
        StartHandle,
        SysGongKuang,
        MonitorHeader,
        ScaleBox
    },
    mixins: [pageHandler],
    data() {
        return {
            operationRecordsDialogVisible:false,
            operationRecordsData:[],
            jiaoAnValue: [],
            pageData:null,
            jiaoAnOptions_1:[],
            jiaoAnOptions: [{
                value: '生成教案',
                label: '生成教案',

            }, {
                value: '加载教案',
                label: '加载教案',
            },
                {
                    value: '删除教案',
                    label: '删除教案',
                },{
                    value: '录制教案',
                    label: '录制教案',
                    children: [{
                        value: '开始记录操作到教案完全记录',
                        label: '开始记录操作到教案完全记录'
                    }, {
                        value: '结束记录操作到教案完全结束',
                        label: '结束记录操作到教案完全结束'
                    },]
                }],
            form: {
                name: '',
                gKList: [],
                region:'',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
            },
            gongkuangValue:[],
            newJiaoAnDialog: false,
            gongKuangOptions: [{
                value: '系统工况',
                label: '系统工况',
            }],
            loadJiaoAn:false,
            //删除教案
            removeJiaoAn:false,
            //
            startHandle:false,
            //工况
            sysGongKuang:false,
        }
    },
    watch: {
        watch: {
            newJiaoAnDialog(val) {
                if (val){
                    this.getGkList();
                }
            }
        }
    },
    created() {
        EventBus.$on('ws-connected', this.handleWSConnected)
        if (this.$store.state.ws && this.$store.state.ws.readyState === WebSocket.OPEN) {
            this.handleWSConnected()
        }
    },
    methods: {
        dangwei(val){
          this.$message.success(val)
        },
        handleWSConnected() {
            if (this.$store.state.wsHandled) return
            this.$store.commit('setWsHandled',true)
            wsSend({ cmd: 'getMonitorMainPage' })
        },
        getOperateRecordList() {
            getOperateRecord({}).then(res => {
                if (res.data){
                    const data = JSON.parse(JSON.stringify(res.data.map(o => {
                        o.isHighlight = false;
                        return o;
                    })));
                    if (this.operationRecordsData.length && this.operationRecordsData.length !== data?.length) {
                        data[0].isHighlight = true;
                    }
                    this.operationRecordsData = data;
                }

            });
        },
        operationRecords() {
            this.operationRecordsDialogVisible = true
            this.operationRecordsData = [];
            this.getOperateRecordList();
            this.$nextTick(() => {
                this.$refs.operateRecordDialogRef.$el.style.pointerEvents = 'none';
            });
        },
        clearAll(){
            wsSend({ "cmd": "switchAllClear" })
            submitOperateRecord({ log_desc: '全站清闪' },false)
        },
        alertLog(){
            wsSend({ "cmd": "openAlertWindow" })
        },
        startDrag(e) {
            e.preventDefault();
            const el = this.$refs.page;
            this.isDragging = true;
            this.startX = e.clientX;
            this.startY = e.clientY;
            this.scrollLeft = el.scrollLeft;
            this.scrollTop = el.scrollTop;

            window.addEventListener("mousemove", this.onDrag);
            window.addEventListener("mouseup", this.stopDrag);
        },
        onDrag(e) {
            if (!this.isDragging) return;
            e.preventDefault();

            const dx = e.clientX - this.startX;
            const dy = e.clientY - this.startY;

            cancelAnimationFrame(this.dragAnimationFrame);

            this.dragAnimationFrame = requestAnimationFrame(() => {
                const el = this.$refs.page;
                if (!el) return;

                el.scrollLeft = this.scrollLeft - dx;
                el.scrollTop = this.scrollTop - dy;
            });
        },
        stopDrag() {
            this.isDragging = false;
            cancelAnimationFrame(this.dragAnimationFrame);
            window.removeEventListener("mousemove", this.onDrag);
            window.removeEventListener("mouseup", this.stopDrag);
        },
        async newJiaoAn(){
            if (this.form.name===''){
                this.$message.error('请输入名称')
                return
            }
            if (this.form.region===''){
                this.$message.error('请选择工况')
                return
            }
            if (this.form.desc===''){
                this.$message.error('请输入描述')
                return
            }
            const params = {
                gkId:this.form.region,
                name: this.form.name,
                teaDesc: this.form.desc,
            }
            const res=await saveJAn(params);
            if (res.data.code===200){
                this.$message.success('添加成功')
                this.clearNewData();
            }else{
                this.$message.error('添加失败请检查网路设置')
            }
        },
        closeJiaoAn(){
            this.gongkuangValue=undefined;
            this.jiaoAnValue=undefined;
            this.loadJiaoAn=false
            this.removeJiaoAn=false
            this.sysGongKuang=false
            this.newTicket=false
        },
        closeHandle(){
            this.gongkuangValue=undefined;
            this.jiaoAnValue=undefined;
            this.startHandle=false
        },
        clearNewData(){
            this.form = {
                name: '',
                gKList: [],
                region:'',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
            };
            this.newJiaoAnDialog = false
        },
        showAddJiaoAn(){
            this.newJiaoAnDialog = true
        },
        handleChange(value) {
            if (value){
                this.jiaoAnValue=null
                this.gongkuangValue=null
                const currentSelect = value[value.length - 1]
                switch (currentSelect){
                    case '生成教案':
                        this.newJiaoAnDialog = true
                        break
                    case '加载教案':
                        this.loadJiaoAn = true
                        break
                    case '删除教案':
                        this.removeJiaoAn = true
                        break
                    case '开始记录操作到教案完全记录':
                        this.startHandle = true
                        break
                    case '系统工况':
                        this.sysGongKuang = true
                        break
                }
            }
        },
        messageHandle(data){
            if (data.cmd==='switchAllClear'){
                this.$message.success('全站清闪成功')
                wsSend({ "cmd": "getMonitorMainPage" })
            }
            if (data.cmd==='getMonitorMainPage'){
                this.pageData = JSON.parse(JSON.stringify(data.data))
                console.log(JSON.parse(JSON.stringify(this.pageData)),'主图数据')
            }
        },
    },
    mounted() {
        if(['teacher','admin'].includes(this.$store.state.user?.userRole)){
            this.jiaoAnOptions_1=JSON.parse(JSON.stringify(this.jiaoAnOptions))
        }else{
            this.jiaoAnOptions_1=this.jiaoAnOptions.filter(o=>o.value==='加载教案')
        }
        EventBus.$on("ws-message",this.messageHandle)
        this.$store.commit('setMainPage',true)
    },
    beforeCreate() {
        this.$store.commit('setWsHandled',false)
    },
    beforeDestroy() {
        EventBus.$off("ws-message",this.messageHandle)
        EventBus.$off('ws-connected')
        this.$store.commit('setMainPage',false)
    },
};
</script>
